<script setup lang="ts">
import Header from "@@/components/Head/index.vue"
import Footer from "@@/components/footer/index.vue"
import thumbnail_3 from "@@/assets/images/layouts/thumbnail_3.png"
import goToTop from "@@/assets/images/layouts/go_to_top.png";
import { removeToken } from "@@/utils/cache/cookies.ts"
import { onBeforeMount, onMounted, ref, shallowReactive } from "vue"
import {articleApi, getIndexFourBannerApi, getTagListApi} from "@/api"
import { useUserStore } from "@/pinia/stores/user.ts"
import Swiper from "./Swiper.vue"
const userStore = useUserStore()
const router = useRouter()
const token = ref("")
const username = ref("")
const pageSize = ref(10)
const currentPage = ref(1)
const total = ref(10)
const loading = ref(false)
const list = ref<any[]>([])
const list2 = ref<any[]>([])
const images = ref<any[]>([])
const fourBannerList = ref<any[]>([])
const showTopButton = ref(false)
const checkboxValue = ref<any[]>([])
const checkboxValueOrigin = ref<any[]>([])
const checkboxOptions = ref<any[]>([])
const scrollContainer = ref(null)
function scrollToTop () {
  window.scrollTo({
    // top: document.documentElement.offsetHeight, //回到底部
    top: 0, //回到顶部
    left: 0,
    behavior: "smooth", //smooth 平滑；auto:瞬间
  });
}
const handleScroll = () =>  {
  console.log(scrollContainer.value.scrollTop)
  console.log("handleScroll")
};
function loadImages() {
  getIndexFourBannerApi({page:1, limit:4}).then(res => {
    // 循环添加数据
    for (let i in res.data) {
      fourBannerList.value.push(res.data[i])
      images.value.push({
        title: res.data[i].title,
        link: res.data[i].visit_link,
        src: res.data[i].img
      })
    }
  })
}
function logout() {
  token.value = ""
  username.value = ""
  removeToken()
  userStore.setToken("") // token-admin
  userStore.setUsername("")
}
onBeforeMount(() => {
  loadImages()
  username.value = userStore.getUserName().value
  token.value = userStore.token
})
onMounted(() => {
  getTopNewList()
  getNewListAll(0)
  checkboxValue.value.push(0)
  getTagList()
  window.addEventListener('scroll',function(){
    const scrollTop = document.documentElement.scrollTop;
    // console.log('页面滚动距离:', scrollTop);
    if (scrollTop > 1000) {
      showTopButton.value = true
    } else {
      showTopButton.value = false
    }
  })
})
/** 登录 */
function getTopNewList() {
  const data2 = { page: 1, is_top: 1, limit: 4 }
  articleApi(data2).then(({ data: tableData, code }) => {
    if (code === 0) {
      for (let i = 0; i < tableData.length; i++) {
        list.value.push({
          id: tableData[i].id,
          title: tableData[i].title,
          description: tableData[i].description,
          content: tableData[i].content,
          source_author: tableData[i].source_author,
          create_time: tableData[i].create_time,
          img: tableData[i].img,
          hot_value: tableData[i].hot_value + tableData[i].good_num + tableData[i].collect_num + tableData[i].share_num  + tableData[i].comment_num ,
        })
      }
    }
  })
}
function getTagList () {
  const data2 = { page: currentPage.value, limit: 10 }
  getTagListApi(data2).then(({ data: tableData, code, msg}) => {
    console.log(tableData)
    if (code === 0) {
      for (let i = 0; i < tableData.length; i++) {
        checkboxOptions.value.push({
          label: tableData[i].name,
          value: tableData[i].id,
        })
        checkboxValueOrigin.value.push({
          label: tableData[i].name,
          value: tableData[i].id,
        })
        checkboxValue.value.push(tableData[i].id)
      }

      console.log(checkboxOptions)
    }
  })
}
function getNewListAll(p: any) {
  const data2 = { page: currentPage.value, tag_ids: "", limit: 10, type: 1 }
  if (p == 0) {
    // all标签
     data2.tag_ids = ''
  } else {
     data2.tag_ids = p
  }
  articleApi(data2).then(({ data: tableData, code, msg, count }) => {
    if (code === 0) {
      list2.value = []
      for (let i = 0; i < tableData.length; i++) {
        list2.value.push({
          title: tableData[i].title,
          description: tableData[i].description,
          content: tableData[i].content,
          url: "/#/detail/" + tableData[i].id,
          source_author: tableData[i].source_author,
          create_time: tableData[i].create_time,
          hot_value: tableData[i].hot_value + tableData[i].good_num + tableData[i].collect_num + tableData[i].share_num  + tableData[i].comment_num ,
        })
      }
      total.value = count
    }
  }).catch((data) => {
  }).finally(() => {
    loading.value = false
  })
}
const navigation = shallowReactive<{ [key: string]: any }>({})
function onBroadcastSwiper(swiper: any) {
  navigation.prevEl = swiper.navigation.prevEl
  navigation.prevEl.style.display = "block"
  navigation.nextEl = swiper.navigation.nextEl
  navigation.nextEl.style.display = "block"
}
function tagSelected() {
  let iaAll = true
  const tagArr = checkboxValue.value
  checkboxValueOrigin.value.forEach(function (item) {
    if (!tagArr.includes(item.value)) {
      iaAll = false
    }
  })
  if (iaAll) {
    if (!tagArr.includes(0)) {
      tagArr.push(0)
    }
    getNewListAll(0)
  } else {
    // 去掉全部选项
    if (tagArr.includes(0)) {
      console.log('不包含全部')
      tagArr.splice(tagArr.indexOf(0),1)
    }
    getNewListAll(tagArr.join(','))
  }
}
function handleCurrentChange(value) {
  currentPage.value = value
  console.log("handleCurrentChange")
  getNewListAll(0)
}
function goToUrl (type ) {
  router.push({
    path: type,
    query: {
      type: 'news'
    }
  })
}
</script>

<template>
  <div class="container_info"  ref="scrollContainer" @scroll="handleScroll">
    <Header :activeId="2" />
   <div>
      <Flex vertical gap="middle">
        <Swiper
          :images="images"
          mode="banner"
          :pagination="{ dynamicBullets: true, clickable: true, }"
          :height="320"
          :slides-per-view="1"
          :space-between="0"
          navigation
          mousewheel
          @swiper="onBroadcastSwiper"
        />
      </Flex>
    </div>
    <div class="module-container">
      <div class="module-one list1-box" >
        <div class="item" v-for="item in list">
          <router-link v-if="item.img == ''" :to="{ name: 'newsDetail', params: { id: item.id } }" target="_blank"><img :src="thumbnail_3" class="img1 nohave"></router-link>
          <router-link v-if="item.img != ''" :to="{ name: 'newsDetail', params: { id: item.id } }" target="_blank"><img :src="item.img" class="img1 have"></router-link>
          <div class="row1">
            <router-link :to="{ name: 'newsDetail', params: { id: item.id } }" target="_blank">
              {{ item.title }}
            </router-link>
          </div>
          <div class="row2">
            <router-link :to="{ name: 'newsDetail', params: { id: item.id } }" target="_blank">
            {{ item.description }}
            </router-link>
          </div>
        </div>
      </div>
      <div class="info-content">
        <div class="left">
          <div class="freshbox-box" @click="goToUrl('/ai2')">
            <div class="freshbox">
              <i class="icon2" />
              <span>AI搜索</span>
            </div>
          </div>
          <div class="list2-box">
            <div class="item" v-for="item in list2">
              <a :href="item.url" class="left" target="_blank">
                <img :src="thumbnail_3" class="img1">
                <div class="center">
                  <div class="row1" >
                    <span alt="123" v-if="item.title.length > 44">{{ item.title.substring(0, 44) }}...</span>
                    <span v-if="item.title.length < 44">{{ item.title }}</span>
                  </div>
                  <div class="row2">
                    {{ item.description }}
                  </div>
                  <div class="row3">
                    <div class="text1" >
                      {{ item.source_author}}
                    </div>
                    <div style="width:10px;height:20px;border-right: 1px solid #e0e0e0;line-height: 12px;margin-bottom: 2px;"></div>
                    <div class="text1">
                      {{ item.create_time}}
                    </div>
                    <div style="width:10px;height:20px;border-right: 1px solid #e0e0e0;line-height: 12px;margin-bottom: 2px;"></div>
                    <div class="text1">
                      热度：{{ item.hot_value}}
                    </div>
                  </div>
                </div></a>
              <div class="right scroll left-item-right">
                <a href="/#/detail/25" target="_blank" class="row1">跨国公司高管为何密集访华？</a>
                <a href="/#/detail/25" target="_blank" class="row1">怀孕后还能化妆吗？</a>
                <a href="/#/detail/25" target="_blank" class="row1">行情中心</a>
                <a href="/#/detail/25" target="_blank" class="row1">国家药监局：去年抽检20368批次化妆品&nbsp;合格率97.60%</a>
              </div>
            </div>
          </div>
        </div>
        <div class="right">
          <div class="el-checkbox-group check-box" role="group" aria-label="checkbox-group">
            <div>
              <el-checkbox-group v-model="checkboxValue" style="margin: 10px;" @change="tagSelected">
                <el-checkbox  :label="0" style="padding: 10px 10px;font-size: 14px;">全部</el-checkbox>
                <el-checkbox  v-for="item in checkboxOptions" :label="item.value" :key="item.value" style="padding: 10px 10px;font-size: 14px;">{{item.label}}</el-checkbox>
              </el-checkbox-group>
            </div>
          </div>
          <div class="hot-box">
            <div class="row1">
              <img src="" class="img1">
              <div class="text1">
                热度榜
              </div>
            </div>
            <a href="/#/detail/25" target="_blank" class="row2">
              <div class="text1"> 1. </div>
              <div class="text2">国家药监局：2022年国家... </div></a>
            <a href="/#/detail/25" target="_blank" class="row2">
              <div class="text1"> 2. </div>
              <div class="text2">国家药监局：2022年国家... </div></a>
            <a href="/#/detail/25" target="_blank" class="row2">
              <div class="text1"> 3 </div>
              <div class="text2">国家药监局：2022年国家... </div>
            </a>
            <a href="/#/detail/25" target="_blank" class="row2">
              <div class="text1"> 4. </div>
              <div class="text2">国家药监局：2022年国家... </div></a>
            <a href="/#/detail/25" target="_blank" class="row2">
              <div class="text1"> 5. </div>
              <div class="text2">国家药监局：2022年国家... </div></a>
            <a href="/#/detail/25" target="_blank" class="row2">
              <div class="text1">  6</div>
              <div class="text2">国家药监局：2022年国家... </div>
            </a>
            <a href="/#/detail/25" target="_blank" class="row2">
              <div class="text1"> 7. </div>
              <div class="text2">国家药监局：2022年国家... </div></a>
            <a href="/#/detail/25" target="_blank" class="row2">
              <div class="text1"> 8. </div>
              <div class="text2">国家药监局：2022年国家... </div></a>
            <a href="/#/detail/25" target="_blank" class="row2">
              <div class="text1"> 9. </div>
              <div class="text2">国家药监局：2022年国家... </div>
            </a>
            <a href="/#/detail/25" target="_blank" class="row2">
              <div class="text1">10.</div>
              <div class="text2">国家药监局：2022年国家... </div>
            </a>
            <a href="/#/detail/25" target="_blank" class="row2">
              <div class="text1"> 11.</div>
              <div class="text2">国家药监局：2022年国家... </div>
            </a>
            <a href="/#/detail/25" target="_blank" class="row2">
              <div class="text1"> 12.</div>
              <div class="text2">国家药监局：2022年国家... </div>
            </a>
            <a href="/#/detail/25" target="_blank" class="row2">
              <div class="text1"> 13.</div>
              <div class="text2">国家药监局：2022年国家... </div>
            </a>
            <a href="/#/detail/25" target="_blank" class="row2">
              <div class="text1"> 14.</div>
              <div class="text2">国家药监局：2022年国家... </div>
            </a>
            <a href="/#/detail/25" target="_blank" class="row2">
              <div class="text1"> 15.</div>
              <div class="text2">国家药监局：2022年国家... </div>
            </a>
            <a href="/#/detail/25" target="_blank" class="row2">
              <div class="text1"> 16.</div>
              <div class="text2">国家药监局：2022年国家... </div>
            </a>
            <a href="/#/detail/25" target="_blank" class="row2">
              <div class="text1"> 17.</div>
              <div class="text2">国家药监局：2022年国家... </div>
            </a>
            <a href="/#/detail/25" target="_blank" class="row2">
              <div class="text1"> 18.</div>
              <div class="text2">国家药监局：2022年国家... </div>
            </a>
            <a href="/#/detail/25" target="_blank" class="row2">
              <div class="text1"> 19.</div>
              <div class="text2">国家药监局：2022年国家... </div>
            </a>
            <a href="/#/detail/25" target="_blank" class="row2">
              <div class="text1"> 20.</div>
              <div class="text2">国家药监局：2022年国家... </div>
            </a>
          </div>
        </div>
      </div>
      <div class="module-two">
        <div class="module-two-left">
          <el-pagination
            background
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-size="pageSize"
            layout="total, prev, pager, next, jump"
            :total="total">
          </el-pagination>
        </div>
        <div class="module-two-right"></div>
      </div>
    </div>

    <div class="question-content-box0" v-if="showTopButton" >
      <div class="go_to_bottom"  @click="scrollToTop">
        <a class="rshare-top" onclick="javascript:void(0)" title="返回顶部">
          <el-image :src="goToTop" style="width:40px;height:40px;" alt="" width="40" height="40"></el-image>
        </a>
      </div>
    </div>
    <Footer />
  </div>
</template>

<style src="@/pages/index/style/index.css"  scoped></style>
<style lang="scss" scoped>
.go_to_bottom {
  border-radius: 16px;
  cursor: pointer;
  position: relative;
  margin: 0 auto;
  transform: translateX(-50%);
  width: 40px;
  height: 40px;
  color: #ffffff;
  text-align: center;
  padding: 0;
  background-color: #ffffffff;
  z-index: 19;
}

.question-content-box0 {
  width: 40px;
  height: 208px;
  position: fixed;
  right: 49%;
  margin-right: -650px;
  top: 50%;
  margin-top: 230px;
  z-index: 99;
}
</style>
